<div class="box box-primary">
  <div class="box-header with-border">
    <h3 class="box-title">银行间债券交易列表</h3>
    <button type="button" class="btn btn-primary" (click)="nettingCount()">轧差计算</button>
    <button type="button" class="btn btn-primary" (click)="settlementComparationConfirm()">确定交收比对
    </button>
    <button type="button" class="btn btn-primary" (click)="exportData(downloadUrl)">导出数据</button>
    <button type="button" class="btn btn-primary" (click)="openChangeMatchModalByCondition()">变更匹配</button>
    <button type="button" class="btn btn-primary" (click)="invalidBillConfirm()">手工作废</button>
    <button type="button" class="btn btn-primary" (click)="toggleOverdueModalOpenByCondition()">手工逾期</button>
    <button type="button" class="btn btn-primary" (click)="calcelInvalidBillConfirm()">取消手工作废</button>
    <button type="button" class="btn btn-primary" (click)="cancelOverdueConfirm()">取消手工逾期</button>
    <button type="button" class="btn btn-primary">打印本页</button>
    <a class="btn btn-primary pull-right" routerLink="./fundConfig" [class.hidden]="true">划款指令配置</a>
    <a class="btn btn-primary pull-right" routerLink="./turnover" [class.hidden]="true">组合流水</a>
    <a class="btn btn-primary pull-right" routerLink="./history" [class.hidden]="true">历史交易</a>
    <button type="button" class="btn btn-primary pull-right" (click)="search(true)">手动刷新</button>
  </div>

  <!--搜索栏区域Begin-->
  <div class="box box-body table-responsive no-padding">
    <form class="form-inline">
      <div>
        <div class="form-group">
          <label for="fundCodeList">组合名称：</label>
          <select class="form-control ibt-search-input ibt-select2-plugin" id="fundCodeList" name="fundCodeList">
          </select>
        </div>
        <div class="form-group">
          <label for="fundFavoriteTagIdList">个人组合：</label>
          <select class="form-control ibt-search-input ibt-select2-plugin" id="fundFavoriteTagIdList" name="fundFavoriteTagIdList">
          </select>
        </div>
        <div class="form-group">
          <label for="ownContractStatus">本方合同状态：</label>
          <select class="form-control ibt-search-input" name="ownContractStatus" id="ownContractStatus">
            <option value="">全部</option>
            <option value="2">等款</option>
            <option value="2">等券</option>
            <option value="3">券足</option>
            <option value="3">款足</option>
            <option value="8">完成</option>
          </select>
        </div>
        <div class="form-group">
          <label for="oppoContractStatus">对方合同状态：</label>
          <select class="form-control ibt-search-input" name="oppoContractStatus" id="oppoContractStatus">
            <option value="">全部</option>
            <option value="2">等款</option>
            <option value="2">等券</option>
            <option value="3">券足</option>
            <option value="3">款足</option>
            <option value="8">完成</option>
          </select>
        </div>
        <div class="form-group">
          <label for="tradeDate">交易日期：</label>
          <input type="text" class="form-control daterangepicker-plugin ibt-search-input" id="tradeDate">
        </div>
        <div class="form-group">
          <label for="settlementDate">结算日期：</label>
          <input type="text" class="form-control daterangepicker-plugin ibt-search-input" id="settlementDate">
        </div>
        <div class="form-group">
          <label for="oppoHolderAccountList">交易对手：</label>
          <select class="form-control ibt-search-input ibt-select2-plugin" id="oppoHolderAccountList">
          </select>
        </div>
        <div class="form-group">
          <label for="tradingFloor">交易场所：</label>
          <select class="form-control ibt-search-input ibt-select2-plugin" id="tradingFloor">
            <option value="">全部</option>
            <option value="SCH">上清所</option>
            <option value="CBC">中债登</option>
          </select>
        </div>
        <div class="form-group">
          <label for="tradeType">业务类型：</label>
          <select class="form-control ibt-search-input" id="tradeType" name="tradeType">
            <option value="">全部</option>
            <option value="3">债券买入</option>
            <option value="4">债券卖出</option>
            <option value="5">融资回购</option>
            <option value="7">融资购回</option>
            <option value="6">融券回购</option>
            <option value="8">融券购回</option>
          </select>
        </div>
        <div class="form-group search-btn-container max">
          <button type="button" class="btn btn-primary" (click)="search(true)">查询</button>
          <button type="button" class="btn btn-warning" (click)="resetSearch()">重置</button>
        </div>
      </div>
      <div>
        <div class="checkbox form-group">
          <span>切换到：</span>
          <span class="fold-tool-text" (click)="switchListView()">{{viewShowStatus.groupList ? '不分组视图' : '分组视图'}}</span>
        </div>
        <div class="checkbox form-group" [class.hide]="viewShowStatus.groupList ? false : true">
          <span class="fold-tool-text" (click)="toggleAllListOpen()">全部展开</span>
          <span>&nbsp;|&nbsp;</span>
          <span class="fold-tool-text" (click)="toggleAllListClose()">全部关闭</span>
        </div>
        <div class="checkbox form-group">
          <label>
            <input type="checkbox" class="ibt-search-input group" value="N"
                   name="trdPledgeMatchStatus" id="trdPledgeMatchStatus">质押券比对不一致
          </label>
        </div>
        <div class="checkbox form-group">
          <label>
            <input type="checkbox" class="ibt-search-input group" value="N"
                   name="nettingStatus" id="nettingStatus">未完成轧差
          </label>
        </div>
        <div class="checkbox form-group">
          <label>
            <input type="checkbox" class="ibt-search-input group" value="N"
                   name="settleStatus" id="settleStatus">未完成交收
          </label>
        </div>
        <div class="checkbox form-group">
          <label>
            <input type="checkbox" class="ibt-search-input group" value="N"
                   name="trdMatchStatus" id="trdMatchStatus">未匹配成功
          </label>
        </div>
        <div class="checkbox form-group">
          <label>
            <input type="checkbox" class="ibt-search-input group" value="Y"
                   name="urgentStatus" id="urgentStatus">加急
          </label>
        </div>
        <div class="checkbox form-group">
          <label>
            <input type="checkbox" class="ibt-search-input group" value="N"
                   name="confirmStatus" id="confirmStatus">指令状态未完成
          </label>
        </div>
        <div class="checkbox form-group">
          <label>
            <input type="checkbox" class="ibt-search-input group" value="N"
                   name="contractStatus" id="contractStatus">合同状态未完成
          </label>
        </div>
        <div class="checkbox form-group">
          <label>
            <input type="checkbox" class="ibt-search-input group" value="N"
                   name="tradeOrderFileUploadStatus" id="tradeOrderFileUploadStatus">成交单未上传
          </label>
        </div>
        <div class="checkbox form-group search-btn-container min">
          <button class="btn btn-primary" (click)="search(true)">查询</button>
          <button class="btn btn-warning" (click)="resetSearch()">重置</button>
        </div>
      </div>
    </form>
  </div>
  <!--搜索栏区域End-->

  <!--银行间债券交易分组列表组件Begin-->
  <interbank-list-group [class.hide]="viewShowStatus.groupList ? false : true"
                        [data]="groupListData"
                        (uploadFile)="setUploadedFileList($event)"
                        (removeFile)="removeFile($event)"
                        (urgent)="toggleUrgentModalOpen($event)"
                        (getPledgeAllData)="setAndOpenPledgeMatchModal($event)">
  </interbank-list-group>
  <!--银行间债券交易分组列表组件End-->


  <!--银行间债券交易不分组列表组件Begin-->
  <interbank-list [class.hide]="viewShowStatus.ungroupList ? false : true"
                  [config]="o32RefColsConfig"
                  [data]="listData"
                  [fold]="false" (uploadFile)="setUploadedFileList($event)"
                  (removeFile)="removeFile($event)"
                  (urgent)="toggleUrgentModalOpen($event)"
                  (getPledgeAllData)="setAndOpenPledgeMatchModal($event)">
  </interbank-list>
  <!--银行间债券交易不分组列表组件End-->

  <!--轧差计算组件Begin-->
  <interbank-netting-count [data]="nettingCountData" [willNettingCountData]="willNettingCountData"
                           (close)="resetNettingCountData($event)"
                           (save)="saveNettingCountDataCallback($event)"></interbank-netting-count>
  <!--轧差计算组件End-->

  <!--变更匹配组件Begin-->
  <interbank-change-match
    [otcBondTrade]="changeMatchData.otcBondTrade"
    [trdBondTradeList]="changeMatchData.trdBondTradeList"
    (save)="changeMatchCallback($event)">
  </interbank-change-match>
  <!--变更匹配组件End-->

  <!--手工逾期询问模态框Begin-->
  <div #overdueModal class="modal fade" id="overdueModal" data-backdrop="static"
       data-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="toggleOverdueModalClose()" aria-label="Close">
            <span aria-hidden="true">×</span></button>
          <h4 class="modal-title">确认逾期交收吗？</h4>
        </div>
        <div class="modal-body">
          <form class="form-inline" novalidate>
            <div class="form-group">
              <label for="overdueDate">请选择逾期日期：</label>
              <input type="text" class="form-control datepicker-plugin" id="overdueDate" name="overdueDate"
                     data-settlement-order-id="">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="toggleOverdueModalClose()">否</button>
          <button type="button" class="btn btn-primary" (click)="overdue()">是</button>
        </div>
      </div>
    </div>
  </div>
  <!--手工逾期询问模态框End-->

  <!--发起加急处理模态框Begin-->
  <div #urgentModal class="modal fade" id="urgentModal" data-backdrop="static"
       data-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="toggleUrgentModalClose()" aria-label="Close">
            <span aria-hidden="true">×</span></button>
          <h4 class="modal-title">是否需要发起加急处理？</h4>
        </div>
        <div class="modal-body">
          <form class="form-inline" novalidate>
            <div class="form-group">
              <label for="dealMan">择协助处理的交割员：：</label>
              <select style="width: 150px;" class="form-control" id="dealMan" name="dealMan">
              </select>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="toggleUrgentModalClose()">否</button>
          <button type="button" class="btn btn-primary" (click)="urgent()">是</button>
        </div>
      </div>
    </div>
  </div>
  <!--发起加急处理模态框End-->

  <!--附件上传组件Begin-->
  <interbank-file-upload [config]="uploadFileConfig"
                         (uploadFileEmitter)="uploadFileCallback($event)"
                         (removeFileEmitter)="removeFileCallback($event)">
  </interbank-file-upload>
  <!--附件上传组件End-->

  <!--O32质押券比对信息列表模态框Begin-->
  <div #pledgeMatchListModal class="modal fade" id="pledgeMatchListModal" data-backdrop="static">
    <div class="modal-dialog modal-width-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span></button>
          <h4 class="modal-title">O32质押券比对</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-sm-6">
              <div class="box box-primary box-solid">
                <div class="box-header">
                  <div class="box-title">
                    <h4>
                      O32信息
                    </h4>
                  </div>
                </div>
                <div class="box-body no-padding">
                  <table class="table table-bordered">
                    <tbody>
                    <tr>
                      <td>债券代码</td>
                      <td>债券简称</td>
                      <td>债券面额(万元)</td>
                      <td>质押率(%)</td>
                    </tr>
                    <tr *ngFor="let item of pledgeMatchModalData.trdPledgeInfos">
                      <td>{{item.productCode}}</td>
                      <td>{{item.productName}}</td>
                      <td>{{item.faceValue | numeral}}</td>
                      <td>{{ item.pledgeRate }}</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="box box-success box-solid">
                <div class="box-header">
                  <div class="box-title">
                    <h4>
                      中债/上清信息
                    </h4>
                  </div>
                </div>
                <div class="box-body no-padding">
                  <table class="table table-bordered">
                    <tbody>
                    <tr>
                      <td>债券代码</td>
                      <td>债券简称</td>
                      <td>债券面额(万元)</td>
                      <td>质押率</td>
                    </tr>
                    <tr *ngFor="let item of pledgeMatchModalData.otcPledgeInfos">
                      <td>{{item.productCode}}</td>
                      <td>{{item.productName}}</td>
                      <td>{{item.faceValue | numeral}}</td>
                      <td>{{item.pledgeRate}}</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
      </div>
    </div>
  </div>
  <!--O32质押券比对信息列表模态框End-->
</div>
